import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';

import Empty from '../../../../../components/empty/EmptyData';
import { millisecond } from '../../../../../../common/formatter';
import TaskResult from '../../../../../components/AviliableTaskResult';
import s from './style.module.css';

function Table({ className, data }) {
	return (
		<div className={cn(className, s.tableContainer)}>
			<table className={cn(s.table, 'tableFormat')}>
				<thead>
					<tr className={s.head}>
						<th>监测点</th>
						<th>响应状态码</th>
						<th>总响应时间</th>
						<th>监测结果</th>
						<th className={s.action}>操作</th>
					</tr>
				</thead>
				<tbody>
					{data.map(item => (
						<tr key={item.node} className={s.row}>
							<td>{item.area}</td>
							<td>{item.statusCode || '- -'}</td>
							<td>{item.securityStatus === 'error' ? '- -' : millisecond(item.totalTime)}</td>
							<td
								className={cn({
									[s.red]: ['warning', 'error'].includes(item.securityStatus),
									[s.successColor]: item.securityStatus === 'safe',
								})}
							>
								{item.securityStatus === 'warning' ? '异常' : item.securityStatus === 'error' ? '节点有误' : '正常'}
							</td>
							<td>
								{item.securityStatus === 'error' ? '- -' : <TaskResult
									securityStatus={item.securityStatus}
									result={item}
									text="查看快照"
									type='text'
									withoutIcon={true}
								/>}
							</td>
						</tr>
					))}
				</tbody>
			</table>
			{data.length === 0 && <Empty />}
		</div>
	);
}

Table.propTypes = {
	className: PropTypes.string,
	data: PropTypes.arrayOf(
		PropTypes.shape({
			node: PropTypes.string,
			statusCode: PropTypes.number,
			respTime: PropTypes.number,
			securityStatus: PropTypes.string,
		})
	),
};
Table.defaultProps = {
	className: '',
};

export default Table;
